<template>
  <div class="Videolist">
    <div class="main">
      <div style="display:flex;width: 1050px;align-items: center;">
        <div class="quanbuship" @click="getShow">
          <span>视频></span>
        </div>
      </div>
      <div style="position:absolute;" class="mianba" v-if="show">
        <el-card class="box-card" style="width: 600px;height: 500px;overflow: auto;">
          <div slot="header" class="clearfix">
            <span class="span1" @click="geiquanbuship" :class="index1==-1?'p':''">全部视频</span>
          </div>
          <div class="mianba2">
            <span :class="index1==index?'p':''" v-for="(item,index) in videotaglist" :key="item.id" @click="getmianba(item.id,index)">{{item.name}}</span>
          </div>
        </el-card>
      </div>
      <div class="videolist1" v-for="(item1,index1) in videolist" :key="index1" ref="videolist">
        <div v-for="(item,index) in item1" :key="index" class="videolist1hover">
          <img :src="item.data.coverUrl" alt="">
          <p class="p1">{{item.data.title}}</p>
          <div v-for="(item2,index2) in nickname" :key="index2" v-show="index2==index1">
            <p class="p2" v-for="(item3,index3) in item2" :key="index3" v-show="index3==index">{{item3.nickname}}</p>
          </div>
        </div>
      </div>

    </div>

  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'Videolist',
  data() {
    return {
      index1: -1,
      show: false,
      offset: 0,
      videolist: [],
      nickname: []
    }
  },
  computed: {
    ...mapState({
      videotaglist: state => state.Video.videotaglist,
      talistofallvideos: state => state.Video.talistofallvideos,
      videosundervideotagscategories: state => state.Video.videosundervideotagscategories
    })
  },
  methods: {
    getmianba(n, e) {
      this.$store.dispatch('getGetvideosundervideotagscategories', { id: n, offset: this.offset })
      this.index1 = e
      this.show = false
    },
    getShow() {
      this.show = !this.show
    },
    geiquanbuship() {
      this.index1 = -1
    }
  },
  created() {
    // var intElemScrollTop = $refs.videolist.scrollHeight
  },
  mounted() {
    this.$store.dispatch('getGetvideotaglist')
    this.$store.dispatch('getGetalistofallvideos', { offset: this.offset })
  },
  watch: {
    talistofallvideos: {
      handler(v, o) {
        this.videolist.push(v)
        this.nickname.push(
          v.map(val => {
            return val.data.creator
          })
        )
      }
    },
    videosundervideotagscategories: {
      handler(v, o) {
        this.videolist.push(v)
        this.nickname.push(
          v.map(val => {
            return val.data.creator
          })
        )
      }
    }
  }
}
</script>

<style lang="less" scoped>
.Videolist {
  margin-left: 100px;
  margin-top: 20px;
  .main {
    .quanbuship {
      border: 1px solid #d6d5d5;
      padding: 1px 15px;
      border-radius: 25px;
      display: flex;
      span {
        opacity: 0.7;
      }
      span:hover {
        cursor: pointer;
        background-color: aliceblue;
      }
    }
    .mianba {
      z-index: 999;
      .p {
        color: red;
      }
      .span1 {
        font-size: 9px;
      }
      .span1:hover {
        cursor: pointer;
        color: rgb(250, 59, 59);
      }
      .mianba2 {
        margin-left: 40px;
        display: flex;
        display: grid;
        grid-template-columns: auto auto auto auto auto auto;
        span {
          font-size: 9px;
          margin-bottom: 30px;
        }
        span:hover {
          cursor: pointer;
          color: rgb(252, 49, 49);
        }
      }
    }
    .videolist1 {
      display: flex;
      display: grid;
      margin-top: 20px;
      grid-template-columns: auto auto auto auto;
      img {
        border-radius: 5px;
        width: 250px;
        height: 150px;
      }
      img {
        cursor: pointer;
      }
      .p1 {
        width: 250px;
        overflow: hidden;
        font-size: 10px;
        margin-top: 5px;
        margin-bottom: 5px;
        opacity: 0.8;
      }
      .p1:hover {
        cursor: pointer;
        opacity: 1;
      }
      .p2 {
        width: 250px;
        overflow: hidden;
        font-size: 8px;
        opacity: 0.3;
        margin-bottom: 20px;
      }
      .p2:hover {
        opacity: 0.6;
        cursor: pointer;
      }
    }
  }
}
</style>
<style>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 480px;
}
</style>